<template>
  <div class="container">
    <div class="leftNav" @click.stop="toPersonalrecommend">
      <div class="userInfo" @click.stop="toPersonal">
        <div class="img" :style="`background-image: url(${profile.avatarUrl})`"></div>
        <div class="nikeName">{{profile.nickname}}</div>
      </div>
      <div class="list" v-for="(item, index) in leftNavList" :key="index">
        <div class="title" v-if="item.title">{{ item.title }}</div>
        <div
          class="item iconfont"
          :data-name="item.name"
          v-for="(item, index) in item.list"
          :class="{ active: currentId === item.id }"
          :key="index"
        >
          <span :class="item.icon"></span>
          {{ item.name }}
        </div>
      </div>
      <el-dialog
        append-to-body
        width="400px"
        :visible="dialogVisible"
        :before-close="handleClose"
      >
        <!-- :before-close="UPDATEDIALOGVISIBLE(false)" -->

        <Login />
      </el-dialog>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
import Login from "../Login";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      // dialogVisible: true, //控制dialog框的显示隐藏
      profile:{},
      currentId: 1,
      leftNavList: [
        {
          title: "",
          list: [
            { id: 1, name: "发现音乐", icon: "icon-yinle" },
            { id: 2, name: "私人FM", icon: "icon-FM" },
            { id: 3, name: "视频", icon: "icon-shiping" },
            { id: 4, name: "朋友", icon: "icon-pengyou" },
          ],
        },
        {
          title: "我的音乐",
          list: [
            { id: 5, name: "iTunes音乐", icon: "icon-itunes" },
            { id: 6, name: "下载管理", icon: "icon-xiazai" },
            { id: 7, name: "最近播放", icon: "icon-yunpan" },
            { id: 8, name: "我的音乐云盘", icon: "icon-V" },
            { id: 9, name: "我的收藏", icon: "icon-shoucang" },
          ],
        },
        {
          title: "创建的歌单",
          list: [
            { id: 10, name: "我喜欢的音乐", icon: "icon-aixin" },
            { id: 11, name: "年度歌单", icon: "icon-songlist" },
            { id: 12, name: "年度歌单", icon: "icon-songlist" },
            { id: 13, name: "年度歌单", icon: "icon-songlist" },
            { id: 14, name: "年度歌单", icon: "icon-songlist" },
            { id: 15, name: "年度歌单", icon: "icon-songlist" },
            { id: 16, name: "年度歌单", icon: "icon-songlist" },
            { id: 17, name: "年度歌单", icon: "icon-songlist" },
            { id: 18, name: "年度歌单", icon: "icon-songlist" },
          ],
        },
        {
          title: "收藏的歌单",
          list: [
            { id: 19, name: "xxx的歌单xxx的歌单", icon: "icon-songlist" },
            { id: 20, name: "年度歌单", icon: "icon-songlist" },
            { id: 21, name: "年度歌单", icon: "icon-songlist" },
            { id: 22, name: "年度歌单", icon: "icon-songlist" },
            { id: 23, name: "年度歌单", icon: "icon-songlist" },
            { id: 23, name: "年度歌单", icon: "icon-songlist" },
            { id: 25, name: "年度歌单", icon: "icon-songlist" },
            { id: 26, name: "年度歌单", icon: "icon-songlist" },
            { id: 27, name: "年度歌单", icon: "icon-songlist" },
          ],
        },
      ],
    };
  },
  mounted(){
    this.profile = JSON.parse(localStorage.getItem("profile")) || {nickname:"请登录"}
  },
  computed: {
    ...mapState("home", ["dialogVisible"]),
  },
  components: {
    Login,
  },

  methods: {
    handleClose(done) {
      console.log("handleClose");
      this.UPDATEDIALOGVISIBLE(false);
      done();
    },
    ...mapMutations("home", ["UPDATEDIALOGVISIBLE"]),

    toPersonalrecommend() {
      if (this.$route.path === "/personalrecommend") return;
      this.$router.push("/personalrecommend");
    },
    toPersonal() {
      this.$router.push("/personal");
    },
  },
};
</script>

<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  height: calc(100vh - 50px);
  display: flex;
}
/* 右边内容区 */
.container > .content {
  width: 1020px;
  overflow: auto;
  height: calc(100vh - 100px);
  padding-left: 10px;
  padding-bottom: 50px;
}
/* 底部播放控制器 */
.container > .bottom {
  height: 50px;
  background-color: skyblue;
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* 左边导航开始 */
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.leftNav {
  width: 180px;
  height: calc(100vh - 100px);
  overflow: auto;
  padding-bottom: 50px;
  background-color: rgb(245, 245, 245);
}
.leftNav > .userInfo {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.leftNav > .userInfo > .img {
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  background-size: cover;
  border-radius: 50%;
  margin: 10px;
  margin-left: 10px;
}

.leftNav > .list > .title {
  color: #666;
  font-size: 12px;
  padding-left: 20px;
  margin-top: 20px;
  padding-bottom: 8px;
}
.leftNav > .list > .item {
  display: flex;
  align-items: center;
  padding: 8px;
  padding-left: 20px;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  width: 85%;
  text-overflow: ellipsis;
}

.leftNav > .list > .item span {
  font-size: 22px;
  margin-right: 5px;
}

.leftNav > .list > .item.active {
  color: rgb(251, 50, 50);
  font-weight: 600;
  background-color: rgb(230, 230, 230);
}
.leftNav > .list > .item:hover {
  cursor: pointer;
  background-color: rgb(238, 238, 238);
}
</style>
